/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiDataGridRow {
  display: flex;
}

@include ouiDataGridRowCell {
  @include ouiFontSizeS;

  padding: $ouiDataGridCellPaddingM;
  border-right: $ouiDataGridVerticalBorder;
  border-bottom: $ouiBorderThin;
  flex: 0 0 auto;
  background: $ouiColorEmptyShade;
  position: relative;
  align-items: center;
  display: flex;

  // Hack to allow for all the focus guard stuff
  > * {
    max-width: 100%;
    width: 100%;
  }

  &.ouiDataGridRowCell--firstColumn {
    border-left: $ouiBorderThin;
  }

  &.ouiDataGridRowCell--lastColumn {
    border-right-color: $ouiBorderColor;
  }

  &:focus {
    @include ouiDataGridCellFocus;
    margin-top: -1px;
  }

  // Only add the transition effect on hover, so that it is instantaneous on focus
  // Long delays on hover to mitigate the accordion effect
  &:hover {
    .ouiDataGridRowCell__expandButtonIcon {
      animation-duration: $ouiAnimSpeedExtraFast;
      animation-name: ouiDataGridCellButtonSlideIn;
      animation-iteration-count: 1;
      animation-delay: $ouiAnimSpeedNormal;
      animation-fill-mode: forwards;
    }

    .ouiDataGridRowCell__actionButtonIcon {
      animation-duration: $ouiAnimSpeedExtraFast;
      animation-name: ouiDataGridCellButtonSlideIn;
      animation-iteration-count: 1;
      animation-delay: $ouiAnimSpeedNormal;
      animation-fill-mode: forwards;
    }
  }

  &:not(:hover),
  &.ouiDataGridRowCell--open {
    .ouiDataGridRowCell__expandButtonIcon {
      animation: none;
      margin-left: $ouiDataGridCellPaddingM;
      width: $ouiSizeM;
    }

    .ouiDataGridRowCell__actionButtonIcon {
      animation: none;
      margin-left: $ouiDataGridCellPaddingM;
      width: $ouiSizeM;
    }
  }

  // on focus, directly show action buttons (without animation), but still slide in the open popover button
  &:focus {
    .ouiDataGridRowCell__actionButtonIcon {
      margin-left: $ouiDataGridCellPaddingM;
      width: $ouiSizeM;
    }
  }

  // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
  &:not(:hover):not(:focus):not(.ouiDataGridRowCell--open) {
    .ouiDataGridRowCell__expandButtonIcon,
    .ouiDataGridRowCell__actionButtonIcon {
      display: none;
    }
  }

  &:focus:not(:first-of-type) {
    // Needed because the focus state adds a border, which needs to be subtracted from padding
    padding-left: $ouiDataGridCellPaddingM - 1px;
  }

  &.ouiDataGridRowCell--numeric {
    text-align: right;
  }

  &.ouiDataGridRowCell--currency {
    text-align: right;
  }

  &.ouiDataGridRowCell--uppercase {
    text-transform: uppercase;
  }

  &.ouiDataGridRowCell--lowercase {
    text-transform: lowercase;
  }

  &.ouiDataGridRowCell--capitalize {
    text-transform: capitalize;
  }

  // We only truncate if the cell is not a control column.
  &:not(.ouiDataGridRowCell--controlColumn) {
    .ouiDataGridRowCell__content,
    .ouiDataGridRowCell__truncate,
    &.ouiDataGridRowCell__truncate,
    .ouiDataGridRowCell__expandContent {
      @include ouiTextTruncate;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

.ouiDataGridRowCell__popover {
  @include ouiScrollBar;
  overflow: auto;
  // sass-lint:disable-block no-important
  max-width: 400px !important;
  max-height: 400px !important;
}

.ouiDataGridRowCell__expand {
  width: 100%;
  max-width: 100%;
}

.ouiDataGridRowCell__expandFlex {
  display: flex;
  align-items: center;
  height: 100%;
}

.ouiDataGridRowCell__expandContent {
  flex-grow: 1;
}

.ouiDataGridRowCell__contentByHeight {
  flex-grow: 1;
  height: 100%;
}

.ouiDataGridRowCell__alignBaseLine {
  align-items: baseline;
}

.ouiDataGridRowCell {
  &__actionButtonIcon,
  &__expandButtonIcon {
    height: $ouiSizeM;
    border-radius: calc($ouiBorderRadius / 2);
    width: 0;
    overflow: hidden;
    transition: none; // Have to take out the generic transition so it is instantaneous on focus
  }

  &__expandButtonIcon {
    box-shadow: none !important; // sass-lint:disable-line no-important

    /* ToDo: Remove unnecessary logic: the old beta theme has
     * evolved and the statement below about the `Next` theme
     * is not valid.
     */
    // Remove default .ouiButtonIcon--fill border
    // This way we don't need to animate the border that is inexistent in Next and unnecessary for a fill button
    border: none;

    &-isActive {
      margin-left: $ouiDataGridCellPaddingM;
      width: $ouiSizeM;
    }
  }

  &__expandButton > * {
    z-index: 2;
  }

  &__expandButton {
    display: flex;
    flex-grow: 0;
    position: absolute;
    // Vertically align the button group with the first line of text
    top: calc(#{$ouiLineHeight}em / 2 + #{$ouiDataGridCellPaddingM});
    transform: translateY(-50%);
    // Stick it to the right but use the padding of the container to distance it from the edge
    right: 0;
    padding-right: $ouiDataGridCellPaddingM;
    z-index: 1;
    // Just to have some distance from the content behind it; larger for left so we can show a gradiant
    padding-left: 2 * $ouiDataGridCellPaddingM;
    padding-top: $ouiDataGridCellPaddingM;
    padding-bottom: $ouiDataGridCellPaddingM;

    &::before {
      content: '';
      position: absolute;
      display: block;
      right: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-image: linear-gradient(to right, transparent 0, $ouiColorEmptyShade calc(2 * $ouiDataGridCellPaddingM));
      z-index: 1;
    }

    & > * {
      z-index: 2;
    }
  }
}

// Row highlights
@include ouiDataGridStyles(rowHoverHighlight) {
  .ouiDataGridRow:hover {
    @include ouiDataGridRowCell {
      // sass-lint:disable-block no-important
      // Needed to overtake striping
      background-color: $ouiColorHighlight !important;
    }
  }
}

// Stripes
@include ouiDataGridStyles(stripes) {
  @include ouiDataGridRowCell {
    &.ouiDataGridRowCell--stripe {
      background: $ouiColorLightestShade;
    }
  }
}

// Border alternates
@include ouiDataGridStyles(bordersNone) {
  @include ouiDataGridRowCell {
    // sass-lint:disable-block no-important
    border-color: transparent !important;
  }
}

@include ouiDataGridStyles(bordersHorizontal) {
  @include ouiDataGridRowCell {
    border-right-color: transparent;
    border-left-color: transparent;
  }
}

// Font alternates
@include ouiDataGridStyles(fontSizeSmall) {
  @include ouiDataGridRowCell {
    @include ouiFontSizeXS;
  }
}

.ouiDataGridRowCell--fontSizeSmall {
  @include ouiFontSizeXS;
}

@include ouiDataGridStyles(fontSizeLarge) {
  @include ouiDataGridRowCell {
    @include ouiFontSize;
  }
}

.ouiDataGridRowCell--fontSizeLarge {
  @include ouiFontSize;
}

// Padding alternates
@include ouiDataGridStyles(paddingSmall) {
  @include ouiDataGridRowCell {
    padding: $ouiDataGridCellPaddingS;

    &:focus:not(:first-of-type) {
      // Needed because the focus state adds a border, which needs to be subtracted from padding
      padding-left: $ouiDataGridCellPaddingS - 1px;
    }
  }
}

.ouiDataGridRowCell--paddingSmall {
  padding: $ouiDataGridCellPaddingS;
}

@include ouiDataGridStyles(paddingLarge) {
  @include ouiDataGridRowCell {
    padding: $ouiDataGridCellPaddingL;

    &:focus:not(:first-of-type) {
      // Needed because the focus state adds a border, which needs to be subtracted from padding
      padding-left: $ouiDataGridCellPaddingL - 1px;
    }
  }
}

.ouiDataGridRowCell--paddingLarge {
  padding: $ouiDataGridCellPaddingL;
}

@keyframes ouiDataGridCellButtonSlideIn {
  from {
    margin-left: 0;
    width: 0;
  }

  to {
    margin-left: $ouiDataGridCellPaddingM;
    width: $ouiSizeM;
  }
}
